<template>
  <div class="div1">
    <el-button type="primary" @click="addstudent">添加</el-button>
    <el-button type="danger" @click="deletestudent">删除</el-button>
    <!-- <el-button type="primary" @click="xiugai">修改</el-button> -->
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      class="table"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column property="name" label="姓名" width="120" />
      <el-table-column property="age" label="年龄" width="120" />
      <el-table-column property="sex" label="性别" width="120" />
      <el-table-column property="address" label="地址" show-overflow-tooltip/>
      <el-table-column property="date" label="日期" width="220" />
    </el-table>
    <!-- 弹出的页面内容 -->
      <el-dialog
            title="添加"
            v-model="getmessage"
            width="50%"
            center>
            姓名:<el-input placeholder="请输入内容" v-model="person.name"></el-input>
            年龄:<el-input placeholder="请输入内容" v-model="person.age"></el-input>
            性别:<el-input placeholder="请输入内容" v-model="person.sex"></el-input>
            地址:<el-input placeholder="请输入内容" v-model="person.address"></el-input>
            时间:<el-input placeholder="请输入内容" v-model="person.date"></el-input>
            <el-button type="primary" @click="sendstudent">添加</el-button>
      </el-dialog>
      <!-- 修改数据 -->
      <el-dialog
            title="添加"
            v-model="getmessages"
            width="50%"
            center>
            姓名:<el-input placeholder="请输入内容" v-model="person.name"></el-input>
            年龄:<el-input placeholder="请输入内容" v-model="person.age"></el-input>
            性别:<el-input placeholder="请输入内容" v-model="person.sex"></el-input>
            地址:<el-input placeholder="请输入内容" v-model="person.address"></el-input>
            时间:<el-input placeholder="请输入内容" v-model="person.date"></el-input>
            <el-button type="primary" @click="sendstudent">修改</el-button>
      </el-dialog>
  </div>
</template>

<script lang="ts" setup>
      import { onMounted, reactive, ref } from 'vue'
      import { ElTable } from 'element-plus'
      import student from '../utils/student'
      import { studentadd,studentdelete }  from '../api/student'

      let multipleSelection = ref()
      let handleSelectionChange = (val: any) => {
        multipleSelection.value = val
      }
      let getmessage=ref(false)
      let getmessages=ref(false)
      let tableData:any =ref([])
      
      let person=reactive({
        name:'',
        age:'',
        sex:'',
        address:'',
        date:''
      })

      onMounted(async()=>{
        let data=await (await student()).studentdata
        tableData.value=data
        
      })
      let  addstudent=()=>{
            getmessage.value=true
      }
      // let xiugai=()=>{
      //    getmessages.value=true
      // }
      //添加数据
      let sendstudent=async ()=>{
        let { name , age , sex , address , date }=person
        let res=await studentadd(name , age , sex , address , date)
        if(res.data.code=200){
          alert('添加成功')
         getmessage.value=false
          window.location.reload()
        }else{
          alert('添加失败')
        }
      }
      //删除数据
      let deletestudent=async()=>{
        console.log(multipleSelection.value);
        let arr=multipleSelection.value
        let delelist=arr.map((item:any)=>{
            return item.id
        })
        // console.log(delelist);
        let res=await studentdelete(delelist)
        // console.log(res);
        if(res.data.code=200){
          window.location.reload()
          alert('删除成功')
        }
        
      }
      // 修改数据
</script>

<style scoped lang="less">
.div1{
  width: 1280px;
  margin: 0 auto;
    .table{
      text-align: center;
      border: 1px solid black;
    }
}
</style>
